<!-- 
访问日志
-->
<template>
   <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="类型">
                <a-select
                  placeholder="请选择"
                  allowClear
                  v-model="queryParam.status"
                >
                  <a-select-option
                    :value="item.value"
                    v-for="(item,index) in sourceType"
                    :key="index"
                  >
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-item> 
            </a-col>
            <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="开始日期">
                <a-date-picker
                  show-time
                  @change="startDateChange"
                  v-model="queryParam.startDate"
                  style="width: 100%"
                  placeholder="请输入开始时间"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="8"
              :sm="24"
            >
              <a-form-item label="结束日期">
                <a-date-picker
                  show-time
                  @change="endDateChange"
                  v-model="queryParam.endDate"
                  style="width: 100%"
                  placeholder="请输入结束时间"
                />
              </a-form-item>
            </a-col>
            <a-col>
              <span
                class="table-page-search-submitButtons"
                :style="{ float: 'right', overflow: 'hidden' } || {} "
              >
                <a-button
                  type="primary"
                  @click="getListData"
                >查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <!-- <a-button
          type="primary"
          icon="plus"
          @click="$refs.sysBannerModule.open('add')"
        >新建</a-button> -->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item
              key="1"
              @click="batchDel"
            >
              <a-icon type="delete" />删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
      <!--   -->
      <a-table
        ref="table"
        size="default"
        rowKey="id"
        :rowSelection="rowSelection"
        :columns="columns"
        :data-source="loadData"
        :pagination="pagination"
        @change="changeTable"
        :loading="query.loading"
        :scroll="{x: true}"
      >

        <span
          slot="orderNum"
          slot-scope="text,record"
          @click="$refs.UpdateOrderNum.open({...record})"
          style="cursor: pointer;"
        >
          <span href="">{{text}}</span>
          <a-icon type="edit" />
        </span>
     

        <span
          slot="businessType"
          slot-scope="text"
        >
          <span v-if="text==0">新增</span>
          <span v-if="text==1">修改</span>
          <span v-if="text==2">删除</span>
          <span v-if="text==3">其他</span>
        </span>
        <span
          slot="device"
          slot-scope="text"
        >
          <span v-if="text==0">pc</span>
          <span v-if="text==1">安卓</span>
          <span v-if="text==2">ios</span>
          <span v-if="text==3">其他</span>
        </span>
        <span
          slot="status"
          slot-scope="text"
        >
          <span v-if="text==0"> 正常</span>
          <span v-if="text==1"> 异常</span>
        </span>

        <span
          slot="action"
          slot-scope="text, record"
        >
          <template>
            <!-- <a @click="$refs.sysBannerModule.open('edit',record.id)">修改</a> -->
            <!-- <a-divider type="vertical" /> -->
            <a @click="handleDel(record)">删除</a>
          </template>
        </span>
      </a-table>
    </a-card>

   </page-header-wrapper>
</template>

<script>
import { getList, del, deleteBatch, updateOrderNum } from "@/api/sysAccessLog";
import mixinData from "@/mixin/index";
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_ALL;
/* 
browser (string, optional): 浏览器类型 ,
businessType (integer, optional): 业务类型（0新增 1修改 2删除、3其它 ） ,
compId (integer, optional): 公司id ,
compName (string, optional): 公司名称 ,
createTime (string, optional): 创建时间 ,
createUserId (integer, optional): 创建人ID ,
createUserName (string, optional): 创建人名称 ,
delFlag (integer, optional): 是否删除: 0未删除、1删除 ,
deptId (integer, optional): 部门id ,
deptName (string, optional): 部门名称 ,
device (integer, optional): 设备：0pc、1安卓、2ios、3其他 ,
errorMsg (string, optional): 错误消息 ,
id (integer, optional),
jsonResult (string, optional): 返回参数 ,
jsonResultStatus (string, optional): 返回状态 ,
method (string, optional): 方法名称 ,
operIp (string, optional): 主机地址 ,
operLocation (string, optional): 操作地点 ,
operName (string, optional): 操作人员 ,
operParam (string, optional): 请求参数 ,
operTimes (integer, optional): 操作时长 ,
operUrl (string, optional): 请求URL ,
os (string, optional): 系统类型 ,
requestMethod (string, optional): 请求方式 ,
status (integer, optional): 操作状态（0正常 1异常） ,
title (string, optional): 模块标题 ,
updateTime (string, optional): 更新时间 ,
updateUserId (integer, optional): 更新人ID ,
updateUserName (string, optional): 更新人名称 ,
version (integer, optional): 乐观锁
*/
const columns = [
  // {
  //   title: "排序",
  //   dataIndex: "orderNum",
  //   align: "center",
  //   scopedSlots: { customRender: "orderNum" },
  // },
  {
    title: "浏览器类型",
    dataIndex: "browser",
    align: "center",
    scopedSlots: { customRender: "browser" },
  },
  {
    title: "业务类型", //业务类型（0新增 1修改 2删除、3其它 ） ,
    dataIndex: "businessType",
    align: "center",
    scopedSlots: { customRender: "businessType" },
  },
  {
    title: "公司id", //
    dataIndex: "compId",
    align: "center",
    scopedSlots: { customRender: "compId" },
  },
  {
    title: "公司名称", //
    dataIndex: "compName",
    align: "center",
    scopedSlots: { customRender: "compName" },
  },

  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    scopedSlots: { customRender: "createTime" },
  },
  {
    title: "创建人名称",
    dataIndex: "createUserName",
    align: "center",
    scopedSlots: { customRender: "createUserName" },
  },
  {
    title: "部门名称",
    dataIndex: "deptName",
    align: "center",
    scopedSlots: { customRender: "deptName" },
  },
  {
    title: "设备", //设备：0pc、1安卓、2ios、3其他
    dataIndex: "device",
    align: "center",
    scopedSlots: { customRender: "device" },
  },
  {
    title: "错误消息",
    dataIndex: "errorMsg",
    align: "center",
    scopedSlots: { customRender: "errorMsg" },
  },
  {
    title: "返回参数",
    dataIndex: "jsonResult",
    align: "center",
    scopedSlots: { customRender: "jsonResult" },
  },
  {
    title: "返回状态",
    dataIndex: "jsonResultStatus",
    align: "center",
    scopedSlots: { customRender: "jsonResultStatus" },
  },
  {
    title: "方法名称",
    dataIndex: "method",
    align: "center",
    scopedSlots: { customRender: "method" },
  },
  {
    title: "主机地址",
    dataIndex: "operIp",
    align: "center",
    scopedSlots: { customRender: "operIp" },
  },
  {
    title: "操作地点",
    dataIndex: "operLocation",
    align: "center",
    scopedSlots: { customRender: "operLocation" },
  },
  {
    title: "操作人员",
    dataIndex: "operName",
    align: "center",
    scopedSlots: { customRender: "operName" },
  },
  {
    title: "请求参数",
    dataIndex: "operParam",
    align: "center",
    scopedSlots: { customRender: "operParam" },
  },
  {
    title: "操作时长",
    dataIndex: "operTimes",
    align: "center",
    scopedSlots: { customRender: "operTimes" },
  },
  {
    title: "请求URL",
    dataIndex: "operUrl",
    align: "center",
    scopedSlots: { customRender: "operUrl" },
  },
  {
    title: "系统类型",
    dataIndex: "os",
    align: "center",
    scopedSlots: { customRender: "os" },
  },
  {
    title: "请求方式",
    dataIndex: "requestMethod",
    align: "center",
    scopedSlots: { customRender: "requestMethod" },
  },
  {
    title: "操作状态", //操作状态（0正常 1异常） ,
    dataIndex: "status",
    align: "center",
    scopedSlots: { customRender: "status" },
  },
    {
    title: "模块标题",
    dataIndex: "title",
    align: "center",
    scopedSlots: { customRender: "title" },
  },  {
    title: "更新时间",
    dataIndex: "updateTime",
    align: "center",
    scopedSlots: { customRender: "updateTime" },
  },  {
    title: "更新人名称",
    dataIndex: "updateUserName",
    align: "center",
    scopedSlots: { customRender: "updateUserName" },
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  mixins: [mixinData],
  data() {
    this.columns = columns;
    return {
      SHOW_PARENT,
      sourceType: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 1,
          label: "关闭",
        },
      ],
      // 查询参数
      queryParam: {},
      startDate: "",
      endDate: "",
      loadData: [],
      selectedRowKeys: [],
      selectedRows: [],
    };
  },
  filters: {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      };
    },
  },
  mounted() {
    this.getListData();
  },
  methods: {
    //日期选择范围设置
    // disabledStartDate(startValue) {
    // 	const endValue = this.endDate;
    // 	if (!startValue || !endValue) {
    // 		return false;
    // 	}
    // 	return startValue.valueOf() > endValue.valueOf();
    // },
    // disabledEndDate(endValue) {
    // 	const startValue = this.startDate;
    // 	if (!endValue || !startValue) {
    // 		return false;
    // 	}
    // 	return startValue.valueOf() >= endValue.valueOf();
    // },
    //日期改变事件
    startDateChange(value, dateString) {
      // this.queryParam.startDate = this.startDate ? this.$moment(this.startDate).format('YYYY-MM-DD') + ' 00:00:00' : '';
      this.queryParam.startDate = dateString;
    },
    endDateChange(value, dateString) {
      // this.queryParam.endDate = this.endDate ? this.$moment(this.endDate).format('YYYY-MM-DD') + ' 00:00:00' : '';
      this.queryParam.endDate = dateString;
    },
    copy(url) {
      if (url) {
        this.$copyText(url)
          .then(() => {
            this.$message.success("已成功复制到剪切板");
          })
          .catch(() => {
            this.$message.error("复制失败");
          });
      }
    },
    // 列表
    async getListData() {
      this.query.loading = true;
      let res = await getList({
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...this.queryParam,
      });
      if (res.code == 0) {
        this.loadData = res.data.records;
        this.pagination.total = res.data.total;
      }
      this.query.loading = false;
    },
    changeTable(pagination) {
      this.pagination.current = pagination.current;
      this.getListData();
    },

    //清空搜索条件
    resetSearch() {
      this.queryParam = {};
    },
    handleDel(record) {
      let that = this;
      that.$confirm({
        title: `真的要删除 ${record.id} 吗?`,
        okText: "删除",
        okType: "danger",
        onOk: async () => {
          let res = await del({ id: record.id });
          that.$message.info(res.msg);
          if (res.code == 0) {
            this.getListData();
          }
        },
      });
    },
    batchDel() {
      let that = this,
        ids = that.selectedRowKeys;
      that.$confirm({
        title: `真的要删除所选${ids.length}个商品吗?`,
        okText: "删除",
        okType: "danger",
        onOk: async () => {
          let res = await deleteBatch({ ids: ids.join() });
          that.$message.info(res.msg);
          if (res.code == 0) {
            that.selectedRowKeys = [];
            that.selectedRows = [];
            that.getListData();
          }
        },
      });
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    async updateOrderNum(id, orderNum) {
      let res = await updateOrderNum({
        id,
        orderNum,
      });
      if (res.code == 0) {
        this.$message.success("修改排序成功");
        this.getListData();
      }
    },
  },
};
</script>
